import type { FC } from "react";
import QuestionInputConf, {
  QuestionInputPropsType,
} from "./QuestionInput/index";
import QuestionTitleConf, {
  QuestionTitlePropsType,
} from "./QuestionTitle/index";
import QuestionParagraphConf, {
  QuestionParagraphPropsType,
} from "./QuestionParagraph";
import QuestionInfoConf, { QuestionInfoPropsType } from "./QuestionInfo/index";
import QuestionTextareaConf, {
  QuestionTextareaPropsType,
} from "./QuestionTextarea";
import QuestionRadioConf,{ QuestionRadioPropsType,QuestionRadioStatPropsType } from "./QuestionRadio";
import QuestionCheckboxConf,{ QuestionCheckboxPropsType ,QuestionCheckboxStatPropsType} from "./QuestionCheckbox";
// 统一，各个组件的 prop type 属性状态类型
export type ComponentPropsType = QuestionInputPropsType &
  QuestionTitlePropsType &
  QuestionParagraphPropsType &
  QuestionInfoPropsType &
  QuestionTextareaPropsType&
  QuestionRadioPropsType&
  QuestionCheckboxPropsType;
// 统一各个组件的 stat type 统计状态类型

export type ComponentStatType=QuestionRadioStatPropsType&QuestionCheckboxStatPropsType;


// 统一，组件的配置 type
export type ComponentConfType = {
  title: string;
  type: string;
  Component: FC<ComponentPropsType>;
  PropComponent: FC<ComponentPropsType>;
  defaultProps: ComponentPropsType;
  StatComponent?:FC<ComponentStatType>;
};
// 全部的组件配置的列表
const componentConfList: ComponentConfType[] = [
  QuestionInputConf,
  QuestionTitleConf,
  QuestionParagraphConf,
  QuestionInfoConf,
  QuestionTextareaConf,
  QuestionRadioConf,
  QuestionCheckboxConf
];

//组件分组
export const componentConfGroup = [
  {
    groupId: 1,
    groupName: "文本显示",
    components: [QuestionInfoConf, QuestionTitleConf, QuestionParagraphConf],
  },
  {
    groupId: 2,
    groupName: "用户输入",
    components: [QuestionInputConf, QuestionTextareaConf],
  },
  {
    groupId: 3,
    groupName: "用户选择",
    components: [QuestionCheckboxConf,QuestionRadioConf],
  },
];

//根据类型获取组件配置
export function getComponentConfByType(type: string) {
  return componentConfList.find((c) => c.type === type);
}
